import React from "react";
import classNames from "classnames";
import { prefixCls } from "../constant";

interface PageJumpProps {
  onClick: () => void;
  direction: "prev" | "next";
  jumpNumber: number;
}

const PageJump: React.VFC<PageJumpProps> = (props) => {
  const { direction, jumpNumber, onClick } = props;
  const componentClass = `${prefixCls}-jump`;
  const classname = classNames(`${prefixCls}-item`, componentClass);
  const buttonClassName = classNames(`${componentClass}-${direction}`);

  const directionTitle = (jumpNumber: number) => ({
    prev: `向前${jumpNumber}页`,
    next: `向后${jumpNumber}页`,
  });

  return (
    <li className={classname}>
      <button
        title={directionTitle(jumpNumber)[direction]}
        className={buttonClassName}
        onClick={onClick}
      />
    </li>
  );
};

export default PageJump;
